<template>
	<div>
		<a-modal
			:open="props.open"
			:width="
				props.modelInfo && props.modelInfo.width ?
					props.modelInfo.width
				:	'900px'
			"
			:title="
				props.modelInfo && props.modelInfo.title ?
					props.modelInfo.title
				:	'Basic Modal'
			"
			@ok="handleOk"
			okText="保存"
			:confirmLoading="modelConfig.confirmLoading"
			:destroyOnClose="modelConfig.destroyOnClose"
			@cancel="handleCancel"
		>
			<template #footer>
				<a-button key="back" @click="handleCancel">取消</a-button>
				<a-button
					key="submit"
					type="primary"
					:loading="loading"
					@click="handleOk"
					>保存</a-button
				>
			</template>
			<a-form
				ref="formRef"
				name="UserProfileInfoForm"
				class="ant-advanced-search-form"
				:model="formState"
				@finish="onFinish"
				@finishFailed="onFinishFailed"
				:rules="rulesRef"
				:label-col="labelCol"
				:wrapper-col="wrapperCol"
			>
				<a-row :gutter="24">
					<a-col :span="12">
						<a-form-item
							:name="labelMap['nickname'].name"
							:label="labelMap['nickname'].label"
						>
							<a-input
								v-model:value="formState.nickname"
								:placeholder="'请填写' + labelMap['nickname'].label"
							></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item
							:name="labelMap['gender'].name"
							:label="labelMap['gender'].label"
						>
							<a-input
								v-model:value="formState.gender"
								:placeholder="'请填写' + labelMap['gender'].label"
							></a-input>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="24">
					<a-col :span="12">
						<a-form-item
							:name="labelMap['birthYearMonth'].name"
							:label="labelMap['birthYearMonth'].label"
						>
							<a-input
								v-model:value="formState.birthYearMonth"
								:placeholder="'请填写' + labelMap['birthYearMonth'].label"
							></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item
							:name="labelMap['height'].name"
							:label="labelMap['height'].label"
						>
							<a-input
								v-model:value="formState.height"
								:placeholder="'请填写' + labelMap['height'].label"
							></a-input>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="24">
					<a-col :span="12">
						<a-form-item
							:name="labelMap['weight'].name"
							:label="labelMap['weight'].label"
						>
							<a-input
								v-model:value="formState.weight"
								:placeholder="'请填写' + labelMap['weight'].label"
							></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item
							:name="labelMap['residence'].name"
							:label="labelMap['residence'].label"
						>
							<a-input
								v-model:value="formState.residence"
								:placeholder="'请填写' + labelMap['residence'].label"
							></a-input>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="24">
					<a-col :span="12">
						<a-form-item
							:name="labelMap['maritalStatus'].name"
							:label="labelMap['maritalStatus'].label"
						>
							<a-input
								v-model:value="formState.maritalStatus"
								:placeholder="'请填写' + labelMap['maritalStatus'].label"
							></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item
							:name="labelMap['educationLevel'].name"
							:label="labelMap['educationLevel'].label"
						>
							<a-input
								v-model:value="formState.educationLevel"
								:placeholder="'请填写' + labelMap['educationLevel'].label"
							></a-input>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="24">
					<a-col :span="12">
						<a-form-item
							:name="labelMap['profession'].name"
							:label="labelMap['profession'].label"
						>
							<a-input
								v-model:value="formState.profession"
								:placeholder="'请填写' + labelMap['profession'].label"
							></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item
							:name="labelMap['incomeStatus'].name"
							:label="labelMap['incomeStatus'].label"
						>
							<a-input
								v-model:value="formState.incomeStatus"
								:placeholder="'请填写' + labelMap['incomeStatus'].label"
							></a-input>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="24">
					<a-col :span="12">
						<a-form-item
							:name="labelMap['carHouseStatus'].name"
							:label="labelMap['carHouseStatus'].label"
						>
							<a-input
								v-model:value="formState.carHouseStatus"
								:placeholder="'请填写' + labelMap['carHouseStatus'].label"
							></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item
							:name="labelMap['specialNote'].name"
							:label="labelMap['specialNote'].label"
						>
							<a-input
								v-model:value="formState.specialNote"
								:placeholder="'请填写' + labelMap['specialNote'].label"
							></a-input>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="24">
					<a-col :span="12">
						<a-form-item
							:name="labelMap['partnerRequirements'].name"
							:label="labelMap['partnerRequirements'].label"
						>
							<a-input
								v-model:value="formState.partnerRequirements"
								:placeholder="'请填写' + labelMap['partnerRequirements'].label"
							></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item
							:name="labelMap['loveView'].name"
							:label="labelMap['loveView'].label"
						>
							<a-input
								v-model:value="formState.loveView"
								:placeholder="'请填写' + labelMap['loveView'].label"
							></a-input>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="24">
					<a-col :span="12">
						<a-form-item
							:name="labelMap['idealPartner'].name"
							:label="labelMap['idealPartner'].label"
						>
							<a-input
								v-model:value="formState.idealPartner"
								:placeholder="'请填写' + labelMap['idealPartner'].label"
							></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item
							:name="labelMap['contactPhone'].name"
							:label="labelMap['contactPhone'].label"
						>
							<a-input
								v-model:value="formState.contactPhone"
								:placeholder="'请填写' + labelMap['contactPhone'].label"
							></a-input>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="24">
					<a-col :span="12">
						<a-form-item
							:name="labelMap['avatarIds'].name"
							:label="labelMap['avatarIds'].label"
						>
							<a-input
								v-model:value="formState.avatarIds"
								:placeholder="'请填写' + labelMap['avatarIds'].label"
							></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item
							:name="labelMap['userId'].name"
							:label="labelMap['userId'].label"
						>
							<a-input
								v-model:value="formState.userId"
								:placeholder="'请填写' + labelMap['userId'].label"
							></a-input>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="24">
					<a-col :span="12">
						<a-form-item
							:name="labelMap['zodiac'].name"
							:label="labelMap['zodiac'].label"
						>
							<a-input
								v-model:value="formState.zodiac"
								:placeholder="'请填写' + labelMap['zodiac'].label"
							></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item
							:name="labelMap['cnZodiac'].name"
							:label="labelMap['cnZodiac'].label"
						>
							<a-input
								v-model:value="formState.cnZodiac"
								:placeholder="'请填写' + labelMap['cnZodiac'].label"
							></a-input>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="24">
					<a-col :span="12">
						<a-form-item
							:name="labelMap['school'].name"
							:label="labelMap['school'].label"
						>
							<a-input
								v-model:value="formState.school"
								:placeholder="'请填写' + labelMap['school'].label"
							></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item
							:name="labelMap['educationType'].name"
							:label="labelMap['educationType'].label"
						>
							<a-input
								v-model:value="formState.educationType"
								:placeholder="'请填写' + labelMap['educationType'].label"
							></a-input>
						</a-form-item>
					</a-col>
				</a-row>
			</a-form>
		</a-modal>
	</div>
</template>
<script lang="ts" setup>
import { UserProfileInfoDetail } from './userProfileInfoDetailTs';
import {
	getUserProfileInfoDetail,
	addOrEditUserProfileInfo,
} from '@/api/userInfo/userProfileInfo/userProfileInfoTs';
import { message, FormInstance } from 'ant-design-vue';
import { dictInfo } from '@/views/commonInfo/dictInfo/dictInfoListTs';
import { getDictList } from '@/api/commonInfo/dictInfo/dictInfoTs';
import { ModelInfo } from '../userProfileInfoListTs';

const labelCol = ref({ span: 5 });
const wrapperCol = ref({ span: 19 });

let loading = ref<boolean>(false);

const formRef = ref<FormInstance>();

const labelMap = ref<any>({
	nickname: { name: 'nickname', label: '昵称' },
	gender: { name: 'gender', label: '性别' },
	birthYearMonth: { name: 'birthYearMonth', label: '出生年月' },
	height: { name: 'height', label: '身高 (单位: cm)' },
	weight: { name: 'weight', label: '体重 (单位: kg)' },
	residence: { name: 'residence', label: '居住所在地' },
	maritalStatus: { name: 'maritalStatus', label: '婚姻状况' },
	educationLevel: { name: 'educationLevel', label: '最高学历/文化层次' },
	profession: { name: 'profession', label: '从事行业/职业' },
	incomeStatus: { name: 'incomeStatus', label: '年收入' },
	carHouseStatus: { name: 'carHouseStatus', label: '车房情况' },
	specialNote: { name: 'specialNote', label: '特殊说明' },
	partnerRequirements: { name: 'partnerRequirements', label: '择偶要求' },
	loveView: { name: 'loveView', label: '我的爱情观' },
	idealPartner: { name: 'idealPartner', label: '理想中的Ta' },
	contactPhone: { name: 'contactPhone', label: '联系方式' },
	avatarIds: { name: 'avatarIds', label: '个人形象照片ID, 多个ID用逗号隔开' },
	userId: { name: 'userId', label: '用户id' },
	zodiac: { name: 'zodiac', label: '星座' },
	cnZodiac: { name: 'cnZodiac', label: '属相' },
	school: { name: 'school', label: '学校' },
	educationType: { name: 'educationType', label: '教育类型' },
});

const rulesRef = reactive({
	nickname: [
		{
			required: true,
			message: '昵称不能为空！',
		},
	],
	gender: [
		{
			required: true,
			message: '性别不能为空！',
		},
	],
	birthYearMonth: [
		{
			required: true,
			message: '出生年月不能为空！',
		},
	],
	height: [
		{
			required: true,
			message: '身高 (单位: cm)不能为空！',
		},
	],
	weight: [
		{
			required: true,
			message: '体重 (单位: kg)不能为空！',
		},
	],
	residence: [
		{
			required: true,
			message: '居住所在地不能为空！',
		},
	],
	maritalStatus: [
		{
			required: true,
			message: '婚姻状况不能为空！',
		},
	],
	educationLevel: [
		{
			required: true,
			message: '最高学历/文化层次不能为空！',
		},
	],
	profession: [
		{
			required: true,
			message: '从事行业/职业不能为空！',
		},
	],
	incomeStatus: [
		{
			required: true,
			message: '年收入不能为空！',
		},
	],
	carHouseStatus: [
		{
			required: true,
			message: '车房情况不能为空！',
		},
	],
	specialNote: [
		{
			required: true,
			message: '特殊说明不能为空！',
		},
	],
	partnerRequirements: [
		{
			required: true,
			message: '择偶要求不能为空！',
		},
	],
	loveView: [
		{
			required: true,
			message: '我的爱情观不能为空！',
		},
	],
	idealPartner: [
		{
			required: true,
			message: '理想中的Ta不能为空！',
		},
	],
	contactPhone: [
		{
			required: true,
			message: '联系方式不能为空！',
		},
	],
	avatarIds: [
		{
			required: true,
			message: '个人形象照片ID, 多个ID用逗号隔开不能为空！',
		},
	],
	userId: [
		{
			required: true,
			message: '用户id不能为空！',
		},
	],
	zodiac: [
		{
			required: true,
			message: '星座不能为空！',
		},
	],
	cnZodiac: [
		{
			required: true,
			message: '属相不能为空！',
		},
	],
	school: [
		{
			required: true,
			message: '学校不能为空！',
		},
	],
	educationType: [
		{
			required: true,
			message: '教育类型不能为空！',
		},
	],
});

const modelConfig = {
	confirmLoading: true,
	destroyOnClose: true,
};

interface Props {
	open?: boolean;
	modelInfo?: ModelInfo;
}
const props = defineProps<Props>();

let formState = ref<UserProfileInfoDetail>({});

let genderList = ref<dictInfo[]>([]);
let residenceList = ref<dictInfo[]>([]);
let maritalStatusList = ref<dictInfo[]>([]);
let educationLevelList = ref<dictInfo[]>([]);
let professionList = ref<dictInfo[]>([]);
let incomeStatusList = ref<dictInfo[]>([]);
let carHouseStatusList = ref<dictInfo[]>([]);
let zodiacList = ref<dictInfo[]>([]);
let cnZodiacList = ref<dictInfo[]>([]);
let schoolList = ref<dictInfo[]>([]);
let educationTypeList = ref<dictInfo[]>([]);

const getDictInfoList = () => {
	getDictList(
		'educationType,educationType,educationType,educationType,educationType,educationType,educationType,educationType,educationType,school,educationType',
	).then((res) => {
		if (res.code == '200') {
			genderList.value = res.data.filter(
				(item: { belongTo: string }) => item.belongTo == 'educationType',
			);
			residenceList.value = res.data.filter(
				(item: { belongTo: string }) => item.belongTo == 'educationType',
			);
			maritalStatusList.value = res.data.filter(
				(item: { belongTo: string }) => item.belongTo == 'educationType',
			);
			educationLevelList.value = res.data.filter(
				(item: { belongTo: string }) => item.belongTo == 'educationType',
			);
			professionList.value = res.data.filter(
				(item: { belongTo: string }) => item.belongTo == 'educationType',
			);
			incomeStatusList.value = res.data.filter(
				(item: { belongTo: string }) => item.belongTo == 'educationType',
			);
			carHouseStatusList.value = res.data.filter(
				(item: { belongTo: string }) => item.belongTo == 'educationType',
			);
			zodiacList.value = res.data.filter(
				(item: { belongTo: string }) => item.belongTo == 'educationType',
			);
			cnZodiacList.value = res.data.filter(
				(item: { belongTo: string }) => item.belongTo == 'educationType',
			);
			schoolList.value = res.data.filter(
				(item: { belongTo: string }) => item.belongTo == 'school',
			);
			educationTypeList.value = res.data.filter(
				(item: { belongTo: string }) => item.belongTo == 'educationType',
			);
		} else {
			message.error((res && res.message) || '查询列表失败！');
		}
	});
};

const emit = defineEmits(['handleOk', 'handleCancel']);

const handleOk = (): void => {
	loading.value = true;
	if (formRef.value) {
		formRef.value
			.validateFields()
			.then(() => saveUserProfileInfoManager())
			.catch(() => {
				loading.value = false;
			});
	}
};

const handleCancel = (): void => {
	emit('handleCancel', false);
};

//保存用户档案表信息
const saveUserProfileInfoManager = (): void => {
	let method = '';
	if (formState.value.id) {
		method = 'put';
	} else {
		method = 'post';
	}
	addOrEditUserProfileInfo(method, formState.value)
		.then((res) => {
			if (res.code == '200') {
				message.success((res && res.message) || '保存成功！');
				emit('handleOk', false);
			} else {
				message.error((res && res.message) || '保存失败！');
			}
			formState.value = {};
		})
		.catch((error: any) => {
			message.error(error?.message || '保存失败！');
		})
		.finally(() => {
			loading.value = false;
		});
};

const onFinish = (values: any): void => {
	console.log('Success:', values);
};

const onFinishFailed = (errorInfo: any): void => {
	console.log('Failed:', errorInfo);
};

const init = (): void => {
	getDictInfoList();
	if (props.modelInfo) {
		if (props.modelInfo.id) {
			getUserProfileInfoDetail(props.modelInfo.id)
				.then((res) => {
					if (res.code == '200') {
						formState.value = res.data;
						modelConfig.confirmLoading = false;
					} else {
						message.error((res && res.message) || '查询失败！');
					}
				})
				.catch((error: any) => {
					let data = error?.response?.data;
					if (data) {
						message.error(data?.message || '查询失败！');
					}
				});
		} else {
			modelConfig.confirmLoading = false;
			formState.value = {};
		}
	}
};

watch(
	() => props.open,
	(newVal) => {
		if (newVal) {
			init();
		}
	},
	{
		immediate: true,
		deep: true,
	},
);

defineExpose({ handleOk, handleCancel });
</script>
<style lang="scss" scoped></style>
